<template>
	<view class="feedback-wrapper">
		<!-- #ifdef H5 -->
<!-- 		<view class="goPage">
			<view class="iconfont icon-fanhui1 acea-row row-center-wrapper" @click="gotoPre"></view>
		</view> -->
		<!-- #endif -->
		<view class="head">
			<image v-if="appType == 1" class="head-img" src="https://oss.jingyinmao.cn/attach/2023/07/ce451202307071436352930.png"></image>
			<image v-else-if="appType == 2" class="head-img" src="https://oss.jingyinmao.cn/attach/2023/07/f928d20230726175836770.png"></image>
			<image v-else class="head-img" src="https://jipinzulin.oss-cn-beijing.aliyuncs.com/attach/2023/06/b5436202306251417138765.png"></image>
			<view class="left-wrapper">
				<view class="title">请填写以下反馈信息</view>
				<view class="txt">为提高用户体验，我们将重视每一份用户提交的信息，请填写信息帮助我们明确问题。</view>
			</view>
			<!-- <view class="img-box"><image src="../static/feed-icon.png" mode=""></image></view> -->
		</view>
		<view class="main">
			<view class="title">您的姓名</view>
			<view class="input-box">
				<input type="text" placeholder="请输入您的真实姓名" v-model="name">
			</view>
			<view class="title" style="margin-top: 24rpx;">联系方式</view>
			<view class="input-box">
			<input type="text" placeholder="请输入您的联系电话" v-model="phone">
			</view>
			<view class="title" style="margin-top: 24rpx;">反馈内容</view>
			<view class="input-box">
				<textarea type="text" placeholder="请填写您要反馈的内容" v-model="con" maxlength="240" />
			</view>
		</view>
		
		<view class="bottom-footer">
			<view class="sub_btn app-btn-bg" @click="subMit">确认提交</view>
		</view>
		
		
		
	</view>
</template>

<script>
		let app = getApp();

	import { serviceFeedBack,feedBackPost } from '@/api/kefu.js'
	export default{
		name:'feedback',
		data(){
			return {
				appType: app.globalData.appType,
				name:'',
				phone:'',
				con:'',
				feedback:''
			}
		},
		onLoad(){
			this.getInfo()
		},
		onShow(){
			uni.removeStorageSync('form_type_cart');
		},
		methods:{
			// 返回上一页
			gotoPre(){
				uni.navigateBack();
			},
			getInfo(){
				serviceFeedBack().then(res=>{
					this.feedback = res.data.feedback
				})
			},
			subMit(){
				if(!this.name){
					return this.$util.Tips({
						title:'请填写姓名'
					})
				}
				if(!this.phone || !(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone))){
					return this.$util.Tips({
						title:'请填写正确的手机号码'
					})
				}
				if(!this.con){
					return this.$util.Tips({
						title:'请填写内容'
					})
				}
				feedBackPost({
					rela_name:this.name,
					phone:this.phone,
					content:this.con
				}).then(res=>{
					this.$util.Tips({
						title:res.msg,
						icon:'success'
					},{
						tab:3
					})
				}).catch(function(res) {
					that.$util.Tips({ title: res });
				});
			}
		}
	}
</script>

<style lang="stylus">
	page {
		background-color: #fff;
	}
	.goPage{
		background-color #3A3A3A;
		padding 20rpx 0 0 20rpx;
		.icon-fanhui1{
			background-color #fff;
			color #333;
			width 50rpx;
			height 50rpx;
			border-radius 50%;
			font-size 20rpx
		}
	}
	.feedback-wrapper
		.head
			position: relative
			// display flex
			// align-items center
			height 264rpx
			padding 0rpx 30rpx
			background-color #3A3A3A
			
			.head-img {
				position: absolute
				left: 0
				top: 0
				width: 100%
				height: 264rpx
			}
			
			.left-wrapper
				position: relative
				// width  456rpx
				color #fff
				font-size 28rpx
				padding-top: 48rpx
				.title
					margin-bottom 15rpx
					font-size 40rpx
				.txt
					color: rgba(255,255,255,0.72);
		
		.info
			display flex
			background-color #fff
			.info-item
				flex 1
				display flex
				flex-direction column
				align-items center
				justify-content center
				height 138rpx
				border-right 1px solid #F0F1F2
				&:last-child
					border:none
				.big-txt
					font-size 32rpx
					font-weight bold
					color #282828
				.small
					margin-top 10rpx
					font-size 24rpx
					color #9F9F9F
		.main
			position: relative
			margin-top -16rpx
			padding 30rpx 30rpx 68rpx
			background-color #FFF
			border-top-left-radius: 24rpx
			border-top-right-radius: 24rpx
			.title
				font-size 28rpx
				font-weight bold
			.input-box
				margin-top 20rpx
				input
					display block
					width 100%
					height 96rpx
					background #FFFF
					font-size 28rpx
					padding-left 20rpx
					border-radius: 16rpx;
					border: 2rpx solid #EBEBEB;
				textarea
					display block
					// width 100%
					height 260rpx
					padding 20rpx
					background #FFF
					font-size 28rpx
					border-radius: 16rpx;
					border: 2rpx solid #EBEBEB;
		.bottom-footer
			padding: 0 30rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			box-sizing: border-box;
			background-color: #fff;
			z-index: 277;
			border-top: 1px solid #f0f0f0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: calc(120rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			padding-bottom: calc(0rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		.sub_btn
			width 100%
			height 86rpx
			line-height 86rpx
			font-size 30rpx
			text-align center
			color #fff
			border-radius 43rpx
			background: linear-gradient(90deg, #71EBDA 0%, #39CCC2 100%);	
</style>
